import { createBrowserRouter } from "react-router-dom"
import { Suspense, lazy } from "react"
import Layout from "@/layout"
import Login from "@/pages/login/login"

const Index = lazy(() => import("@/pages/index"))
const User = lazy(() => import("@/pages/user"))
const Role = lazy(() => import("@/pages/role"))
const Menu = lazy(() => import("@/pages/menu"))
const Dept = lazy(() => import("@/pages/dept"))
const Practice1 = lazy(() => import("@/pages/practice/practice1"))
const Practice2 = lazy(() => import("@/pages/practice/practice2"))
const Practice3 = lazy(() => import("@/pages/practice/practice3"))
const Practice4 = lazy(() => import("@/pages/practice/practice4"))
const Practice5 = lazy(() => import("@/pages/practice/practice5"))
const Practice6 = lazy(() => import("@/pages/practice/practice6"))

import { Permission } from "../permission"

const router = createBrowserRouter([
    {
        path: "/",
        element: <Permission><Layout /></Permission>,
        children: [
            {
                // path: "index",
                index: true,
                element: <Suspense fallback="加载中"><Index /></Suspense>
            },
            {
                path: "user",
                element: <Suspense fallback><User /></Suspense>
            },
            {
                path: "role",
                element: <Suspense fallback><Role /></Suspense>
            },
            {
                path: "menu",
                element: <Suspense fallback><Menu /></Suspense>
            },
            {
                path: "dept",
                element: <Suspense fallback><Dept /></Suspense>
            },
            {
                path: "practice1",
                element: <Suspense fallback><Practice1 /></Suspense>
            },
            {
                path: "practice2",
                element: <Suspense fallback><Practice2 /></Suspense>
            },
            {
                path: "practice3",
                element: <Suspense fallback><Practice3 /></Suspense>
            },
            {
                path: "practice4",
                element: <Suspense fallback><Practice4 /></Suspense>
            },
            {
                path: "practice5",
                element: <Suspense fallback><Practice5 /></Suspense>
            },
            {
                path: "practice6",
                element: <Suspense fallback><Practice6 /></Suspense>
            }
        ]
    },
    {
        path: "/login",
        element: <Login />
    }
])

export default router